<template>
  <view class="img_box">
    <block v-if="sliderImgs.length == 1">
      <view class="img_box1" v-if="!articleImgs">
        <block v-for="(item,i) in sliderImgs" :key="i">
          <image :src="item" mode="aspectFill" @click="TanPreviewImage(sliderImgs,i)"></image>
        </block>
      </view>
      <view class="img_box11" v-else>
        <block v-for="(item,i) in sliderImgs" :key="i">
          <image :src="item" mode="aspectFill" @click="TanPreviewImage(sliderImgs,i)"></image>
        </block>
      </view>
    </block>
    <block v-else-if="sliderImgs.length == 2">
      <view class="img_box2" v-if="!articleImgs">
        <block v-for="(item,i) in sliderImgs" :key="i">
          <image :src="item" mode="aspectFill" @click="TanPreviewImage(sliderImgs,i)"></image>
        </block>
      </view>
      <view class="img_box22" v-else>
        <block v-for="(item,i) in sliderImgs" :key="i">
          <image :src="item" mode="aspectFill" @click="TanPreviewImage(sliderImgs,i)"></image>
        </block>
      </view>
    </block>
    <view class="img_box4" v-else-if="sliderImgs.length == 4">
      <block v-for="(item,i) in sliderImgs" :key="i">
        <image :src="item" mode="aspectFill" @click="TanPreviewImage(sliderImgs,i)"></image>
      </block>
    </view>
    <view class="img_box2" v-else>
      <block v-for="(item,i) in sliderImgs" :key="i">
        <image :src="item" mode="aspectFill" @click="TanPreviewImage(sliderImgs,i)"></image>
      </block>
    </view>
  </view>
</template>

<script>
  export default {
    name: "user_imglist",
    data() {
      return {

      };
    },
    props: {
      sliderImgs: {
        type: Array,
        default: []
      },
      articleImgs: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      //点击图片进入函数，传入当前列表的索引index
      TanPreviewImage(sliderImgs, i) {
        console.log(sliderImgs)
        uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://21111889:8970/6_1597822634094.png"]
          current: i, //这里是判断到点击列表上的某个图片，就读取索引的图片
          urls: sliderImgs, //这是整个内容的图片数组，放一个数组里，就可以左右切换了
          longPressActions: { //长按保存图片到相册
            itemList: ['保存图片'],
            success: (data) => {
              console.log(data);
              uni.saveImageToPhotosAlbum({ //保存图片到相册
                filePath: payUrl,
                success: function() {
                  uni.showToast({
                    icon: 'success',
                    title: '保存成功'
                  })
                },
                fail: (err) => {
                  uni.showToast({
                    icon: 'none',
                    title: '保存失败，请重新尝试'
                  })
                }
              });
            },
            fail: (err) => {
              console.log(err.errMsg);
            }
          }
        });
      },
    }
  }
</script>

<style lang="scss">
  .img_box1 {
    image {
      width: 390rpx;
      height: 560rpx;
      border-radius: 15rpx;
      margin-top: 25rpx;
      vertical-align: top;
    }
  }
  
  .img_box11 {
    image {
      width: 100%;
      height: 326rpx;
      border-radius: 15rpx;
      margin-top: 25rpx;
      vertical-align: top;
    }
  }

  .img_box2 {
    image:nth-child(3n) {
      margin-right: 0rpx !important;
    }

    image {
      width: 31%;
      height: 216rpx;
      border-radius: 15rpx;
      margin-top: 24rpx;
      margin-right: 24rpx;
      vertical-align: top;
    }
  }
  
  .img_box22 {
    image:nth-child(2n) {
      margin-right: 0rpx !important;
    }
  
    image {
      width: 48%;
      height: 216rpx;
      border-radius: 15rpx;
      margin-top: 24rpx;
      margin-right: 24rpx;
      vertical-align: top;
    }
  }

  .img_box4 {
    width: 100%;

    image {
      width: 31%;
      height: 216rpx;
      border-radius: 15rpx;
      margin-top: 24rpx;
      margin-right: 24rpx;
      vertical-align: top;
    }
  }
</style>
